<template>
  <div class="recruit">
    <el-row :gutter="12">
      <el-col :span="4"></el-col>
      <el-col :span="16">
        <div class="block">
            <el-timeline>
              <el-timeline-item placement="top" v-for="(re,index) in recruits" :key="index">
                <router-link :to="{path: '/user/recruitDetail', query: {id: re.id}}">

                  <el-card shadow="hover">
                  <div slot="header" class="clearfix">
                    <span style="float: left;font-weight:bold;font-size:20px;" type="text">{{ re.post }}</span>
                    <span style="float: right; padding: 3px 0;color: blue;font-weight:bold;font-size:20px;" type="text">{{ re.salary }}K</span>
                  </div>
                  <div class="comname">
                    <span>{{ re.cname }}</span>
                  </div><br>
                  <div class="comaddress">
                    <span>{{ re.address }}</span>
                  </div>
                </el-card>

                </router-link>

              </el-timeline-item>
            </el-timeline>
            <el-pagination class="mpage"
                           background
                           layout="prev, pager, next"
                           :current-page="currentPage"
                           :page-size="pageSize"
                           :total="total"
                           @current-change=page>
            </el-pagination>
            </div>
          <el-timeline>
          </el-timeline>
        </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Recruit",
  data() {
    return {
      recruits: [],     // 数据
      currentPage: 1,   // 当前页
      total: 0,         // 总页数
      pageSize: 5,      // 一页有多少内容
    }
  },
  mounted() {
    this.page(1)
  },
  methods: {
    page(currentPage) {
      const _this = this
      _this.$axios.get('/recruitAll?currentPage=' + currentPage).then(res => {
        console.log(res)
        _this.recruits = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size
      })
    }
  }
}
</script>

<style scoped>

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

 .el-row {
   margin-bottom: 20px;
   display:flex;
   flex-wrap: wrap;
 }
 .el-row  .el-card {
   min-width: 100%;
   height: 100%;
   margin-right: 20px;
   transition: all.5s;
 }

.comaddress {
  font-size: 11px;
  float:left;
}
.comname {
  font-size: 11px;
  float:left;
}

</style>
